<template>
  <div class="Tages">
    <div class="tages_box">
      <el-tag class="tags_list" type="primary" effect="plain" size="medium" v-for="(item,index) in routerTage"
              :key="item.meta.path"
              @contextmenu.prevent.native="closeSelectedTag(item,$event,index)"
              @click="routerLink(item)"
              @close="delTages(item)"
              :disable-transitions="true"
              :class="{isActive:item.path === $route.path}"
              closable>
        <span style="padding: 0 10px">
                  {{ item.meta.title }}
        </span>
      </el-tag>
    </div>
    <transition name="el-fade-in-linear">
      <el-card :body-style="{padding:'0px'}" v-show="visible" class="visible" style="position: absolute"
               :style="{left:panelLeft+'px',top:panelTop+'px'}">
        <ul>
          <li @click="closeLeft"><i class="el-icon-arrow-left "></i> {{ $t('关闭左侧') }}</li>
          <li @click="closeRight"><i class="el-icon-arrow-right "></i> {{ $t('关闭右侧') }}</li>
          <li @click="closeAllTages"><i class="el-icon-close "></i> {{ $t('关闭全部') }}</li>
        </ul>
      </el-card>
    </transition>
  </div>
</template>

<script>
export default {
  name: "routerTage",
  data() {
    return {
      routerTage: [],
      panelTop: '',
      panelLeft: '',
      visible: false,
      closeIndex: 0
    }
  },
  watch: {
    '$store.state.routerTage': function (val) {
      this.routerTage = val
    },
    $route(val) {
      this.addTages(val)
    },
    visible(value) {
      if (value) {
        document.body.addEventListener('click', this.closeMenu)
      } else {
        document.body.removeEventListener('click', this.closeMenu)
      }
    }
  },
  mounted() {
    this.addTages(this.$route)
  },
  methods: {
    addTages(value) {
      const routerTage = this.$store.state.routerTage
      if (routerTage.some(v => v.path === value.path)) return
      this.$store.dispatch('setRouteTage', value)
    },
    routerLink(item) {
      if (item.path !== this.$route.path) {
        this.$router.push({
          path: item.path,
          query: item.query
        })
      }
    },
    closeSelectedTag(item, e, index) {
      const menuMinWidth = 105
      const offsetLeft = this.$el.getBoundingClientRect().left
      const offsetWidth = this.$el.offsetWidth
      const maxLeft = offsetWidth - menuMinWidth
      const left = e.clientX - offsetLeft + 15
      if (left > maxLeft) {
        this.panelLeft = maxLeft
      } else {
        this.panelLeft = left
      }
      this.panelTop = e.clientY
      this.closeIndex = index
      this.visible = true
    },
    closeRight() {
      const routerTage = this.$store.state.routerTage
      routerTage.splice(this.closeIndex + 1, routerTage.length)
    },
    closeLeft() {
      const routerTage = this.$store.state.routerTage
      routerTage.splice(0, this.closeIndex)
    },
    closeMenu() {
      this.visible = false
    },
    closeAllTages() {
      this.$store.dispatch('setRouteTage', 'clearAll')
      this.addTages(this.$route)
    },
    delTages(item) {
      const path = item.path
      this.routerTage.forEach((i, index) => {
        if (i.path === path) {
          if (this.routerTage.length !== 1) this.routerTage.splice(index, 1)
        }
      })
      if (path === this.$route.path) {
        const routes = this.routerTage[this.routerTage.length - 1]
        if (routes) {
          this.routerLink(routes)
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.isActive {
  background-color: #F1B901 !important;
  color: #fff !important;

  ::v-deep .el-tag__close {
    color: #322929 !important;
  }

  ::v-deep .el-tag__close:hover {
    background-color: #ffffff !important;
  }
}

.tages_box::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 8px;
}

.tages_box::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #a7abb5;
  cursor: pointer;
}

.tages_box::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background: #ededed;
}

.Tages {
  background-color: #f0f2f5;
  box-sizing: border-box;
  padding: 10px 0;
  width: 100%;
  //overflow: hidden;
  .tages_box {
    white-space: nowrap;
    width: 100%;
    overflow-x: auto;

    .tags_list {
      margin: 0 3px 3px 3px;
      cursor: pointer;
      height: 25px;
      font-size: 10px;
      transition: 0.15s ease-in;
      border-radius: 5px !important;
      border: 0px;

      ::v-deep .el-tag__close {
        color: #7e7a7a;
        font-size: 12px;
        font-weight: 600;
      }

      ::v-deep .el-tag__close:hover {
        background-color: #F1B901;
      }
    }

  }

  .visible {
    border-radius: 4px;
    background-color: #ffffff;
    text-align: left;
    box-sizing: border-box;
    margin-right: 20px;
    z-index: 3000;
    ul {
      list-style: none;
      margin: 0;
      padding: 10px 0;
      li {
        font-size: 14px;
        padding: 5px 10px;
        cursor: pointer;
      }

      li:hover {
        background-color: #f0f2f5;
        color: #F1B901;
      }
    }
  }
}
</style>
